<template>
	<div class="base">
		<!-- <div>
			<div class="clear_float jiben1">
				<div>
					<span class="fa fa-bookmark-o"></span>
					<span>名称</span><span>海口镇</span>
				</div>
				<div>
					<span class="fa fa-bookmark-o"></span>
					<span>人口(个)</span><span>10000</span>
				</div>
			</div>
			<div class="clear_float jiben1">
				<div>
					<span class="fa fa-bookmark-o"></span>
					<span>地质灾害点</span><span>3</span>
				</div>
				<div>
					<span class="fa fa-bookmark-o"></span>
					<span>水库(个)</span><span>2</span>
				</div>
			</div>
			<div class="clear_float jiben1">
				<div>
					<span class="fa fa-bookmark-o"></span>
					<span>避灾场所</span><span>海口镇</span>
				</div>
				<div>
					<span class="fa fa-bookmark-o"></span>
					<span>物资仓库(个)</span><span>10000</span>
				</div>
			</div>
		</div> -->
		<div class="base-info">
			<div class="jiben_xuan clear_float">
				<div :class="{'active':index==0}">未来1小时</div>
				<div :class="{'active':index==1}">未来3小时</div>
				<div :class="{'active':index==2}">未来6小时</div>
				<div :class="{'active':index==3}">短期</div>
				<div :class="{'active':index==4}">7天</div>
			</div>
		<!-- 	<div class="jiben_cons">
				全县晴到多云
			</div> -->
			<!-- <div class="jiben_img">
				<img :src="jibenImg" alt="">
			</div> -->
			<!-- <ul>
				<li>135</li>
			</ul> -->
			<table class="base-content">
				<tr>
					<td>
						<p>01/07</p>
						<p>(周一)</p>
					</td>
					<td>
						<p>01/07</p>
						<p>(周二)</p>
					</td>
					<td>
						<p>01/07</p>
						<p>(周三)</p>
					</td>
					<td>
						<p>01/07</p>
						<p>(周四)</p>
					</td>
					<td>
						<p>01/07</p>
						<p>(周五)</p>
					</td>
					<td>
						<p>01/07</p>
						<p>(周六)</p>
					</td>
					<td>
						<p>01/07</p>
						<p>(周日)</p>
					</td>

				</tr>
				<tr>

					<td><img src="../../../static/images/rain/icon_1.png"  alt=""></td>
					<td><img src="../../../static/images/rain/icon_1.png"  alt=""></td>
					<td><img src="../../../static/images/rain/icon_1.png"  alt=""></td>
					<td><img  src="../../../static/images/rain/icon_1.png"  alt=""></td>
					<td><img  src="../../../static/images/rain/icon_1.png"  alt=""></td>
					<td><img  src="../../../static/images/rain/icon_1.png"  alt=""></td>
					<td><img  src="../../../static/images/rain/icon_1.png"  alt=""></td>

				</tr>
			</table>
			<table class="base-content base-bottom">
					<tr>

					<td><img   src="../../../static/images/rain/icon_25s.png"  alt=""></td>
					<td><img   src="../../../static/images/rain/icon_25s.png"  alt=""></td>
					<td><img   src="../../../static/images/rain/icon_25s.png"  alt=""></td>
					<td><img   src="../../../static/images/rain/icon_25s.png"  alt=""></td>
					<td><img   src="../../../static/images/rain/icon_10.png"  alt=""></td>
					<td><img   src="../../../static/images/rain/icon_10.png"  alt=""></td>
					<td><img   src="../../../static/images/rain/icon_10.png"  alt=""></td>

				</tr>
			</table>
			<div id="base-echart" class="echart_box12 echart_box_all">

			</div>
		</div>

	</div>
</template>

<script>
import topTitle from './top'
import echarts from 'echarts'
export default {
  props:["msg","img"],
	components: {
        topTitle,
  },
	data() {
		return {
			title:{
				name: "基本信息(预报)",
				time: "2018-10-22 16:13",
			},
			index:4,
			jibenImg:"../../../static/images/jiben/x001.jpg",
			jibenImgArr:{
                "北岸村":"../../../static/images/jiben/001.jpg","城北村":"../../../static/images/jiben/002.jpg","陈山村":"../../../static/images/jiben/003.jpg",
                "东门社区":"../../../static/images/jiben/004.jpg","二村村":"../../../static/images/jiben/005.jpg","高湾社区":"../../../static/images/jiben/006.jpg",
                "鹤东村":"../../../static/images/jiben/007.jpg","花园降社区":"../../../static/images/jiben/008.jpg",
                "黄降村":"../../../static/images/jiben/009.jpg","金田村":"../../../static/images/jiben/010.jpg",
                "鸣山社区":"../../../static/images/jiben/011.jpg","平演村":"../../../static/images/jiben/012.jpg","清溪门社区":"../../../static/images/jiben/013.jpg",
                "仁塘湾村":"../../../static/images/jiben/014.jpg","石臼村":"../../../static/images/jiben/015.jpg","塔下社区":"../../../static/images/jiben/016.jpg",
                "坦下村":"../../../static/images/jiben/017.jpg","问鹤社区":"../../../static/images/jiben/018.jpg","新建岭社区":"../../../static/images/jiben/019.jpg",
                "西门社区":"../../../static/images/jiben/020.jpg","一村村":"../../../static/images/jiben/021.jpg","月里湾社区":"../../../static/images/jiben/022.jpg",
                "圩仁村":"../../../static/images/jiben/023.jpg","青田":"../../../static/images/jiben/X001.jpg",
            },
		}
	},
	methods:{
		getImg(){
			var i;

			for(var i in this.jibenImgArr){
				if(this.img==i.slice(0,2)){
					this.jibenImg=this.jibenImgArr[i];
				}
			}

		},
		refreshAll(){

			// this.getImg();
			// //console.log(3333)
			if(this.charts){
				this.charts.resize();
			}
		},
    closeThis(){
        this.$emit('closep',this.msg.name)
    },
    doEchart(data){
			// this.refreshEchartHeight();
			// var arr=[];
			// var x=[];
			// var y=[];
			// var name11=[];
			// for(var i=0;i<data.length;i++){
			// 	x.push(data[i].ObservTimes.slice(6,8)+"时");
			// 	y.push(data[i].Precipitation);
			// 	name11.push(data[i].StationName);
			// 	// y.push();
			// }
			this.charts = echarts.init(document.getElementById("base-echart"));
			// this.charts.setOption({
			// 	color: ['#3398DB'],
			// 	tooltip : {
			// 		trigger: 'axis',
			// 		axisPointer : {            // 坐标轴指示器，坐标轴触发有效
			// 			type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
			// 		}
			// 	},
			// 	grid: {
			// 		show: false,
			// 		top:"18%",
			// 		left: '3%',
			// 		right: '4%',
			// 		bottom: '0%',
			// 		containLabel: true
			// 	},
			// 	xAxis : [
			// 		{
			// 			type : 'category',
			// 			data : x,
			// 			axisTick: {
			// 				alignWithLabel: true
			// 			},
			// 			axisLine:{
			// 				lineStyle: {
			// 					color: '#333'
			// 				}
			// 			}
			// 		}
			// 	],
			// 	yAxis : [
			// 		{
			// 			type : 'value',
			// 			splitLine:{show: false},
			// 			axisLine:{
			// 				lineStyle: {
			// 					color: '#333'
			// 				}
			// 			}
			// 		},
			// 	],
			// 	series : [
			// 		{
			// 			name:'雨强',
			// 			type:'bar',
			// 			barWidth: '60%',
			// 			data:y,
			// 			itemStyle: {
			// 				normal: {
			// 					// barBorderRadius: 5,
			// 					color: new echarts.graphic.LinearGradient(
			// 						0, 0, 0, 1,
			// 						[
			// 							{offset: 0, color: '#00E1F4'},
			// 							{offset: 1, color: 'rgba(0,222,240,0.1)'}
			// 						]
			// 					)
			// 				}
			// 			},
			// 			label: {//bar里面显示的内容
			// 				normal: {
			// 						show: true,
			// 						color:"#333",
			// 						position: 'top',
			// 						formatter:function(val) {
			// 						return name11[val.dataIndex].replace(/乡/g,"").replace(/镇/g,"")+"\n"+y[val.dataIndex]
			// 					}
			// 				},

			// 			},
			// 		}
			// 	]
			// })

			var option = {
				xAxis: {
					show:false,
				  type: 'category',
				  data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
				},
				grid: {
	        left: '-5%',
	        right: '0%',
	        bottom: '0%',
	        top:"20%",
	        containLabel: true
    		},

				yAxis: {
				  type: 'value',
				  show:false,
				  axisLine:{ //y轴
						show:false
					},
					axisTick:{ //y轴刻度线
						show:false
					},
				},
				series: [{
				  data: [7.9, 7, 7, 8, 10, 11, 10],
				  type: 'line',
				  label: {
                normal: {
                    show: true,
                    position: 'top'
                }
            }
					},
					{
				  data: [5, 4, 4, 5, 6, 7, 5],
				  type: 'line',
				  label: {
                normal: {
                    show: true,
                    position: 'bottom'
                }
            }
				}


				]
			}
			this.charts.setOption(option)

		}

    },
	mounted(){
		this.  doEchart()
		// this.getImg();
		this.$emit('refreshTop',this.title)

	}
}
</script>

<style lang="less">
	#base-echart{
		width: 100%;
		height: 37% !important;
		position:absolute;
		top:45%;

	}
	.base{
		position:absolute;
		top: 50px;
		left: 0;
		bottom:0;
		right: 0;
		.base-info{
			position:relative;
			height: 100%;
			background:rgba(61,131,207,.1);
			table{
				width: 100%;
				text-align: center;
				tr{
						padding:0 10px;
				}
				p{
					color: #2167B6;
					padding-top:3px;
				}

			}
		}
		.base-content{
			margin-top: 2%;
			height: 25%;


			img{
				max-width: 100%;

			}
		}
		.base-bottom{
			margin-top: 0;
			position:absolute;
			bottom:0px;
			td{
				padding-top: 10px;
			}
		}
	}
	.jiben_cons{
		padding: 14px 10px;;
		font-size: 12px;
	}
	.jiben_xuan{
		height: 10%;
		&>div{
			float: left;
			width: 20%;
			padding: 8px 1px;
			text-align: center;
			&.active{
				color: #64D0E6;
				border-bottom: 3px solid #64D0E6;
			}
		}
	}
	.jiben_img{
		text-align: center;
		overflow:hidden;
		img{
			max-width: 100%;
    	// height: 290px;
		}
	}
	.jiben1{
		&>div{
			float: left;
			font-size: 12px;
			width: 50%;
			padding: 3px 8px 0px;
			background: rgba(0, 0, 0,0.2);
			margin-top: 1px;
			&>span:nth-child(1){
				width: 12px;
				display: inline-block;
				color: #fff;
			}
			&>span:nth-child(2){
				display: inline-block;
				width: 78px;
				color: #65B47B;
			}
			&>span:nth-child(3){
				width: 40px;
				display: inline-block;
				color: #CCCB0E;
			}
		}
	}
</style>
